<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>找回密码</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/loginAndRegister.css"/>
	</head>
	<body class="login findBackPw">
		<!--登录模块头部 start-->
		<div class="loginHead">
			<div class="loginHeadContent">
				<div class="fl">
					<a href="javascript:void(0);"><img src="../img/indexLogoWhite.png" class="indexLogo"/></a>
				</div>
				<div class="fr">
					<div class="aGroup">
						<a class="loginMenu" href="javascript:void(0);">项目圈</a>
						<a class="loginMenu" href="javascript:void(0);">材料数据库</a>
						<a class="loginMenu" href="javascript:void(0);">计算工具</a>
						<div class="clear"></div>
					</div>
					<div class="btnGroup">
						<a class="btn" href="javascript:void(0);">注册</a>
						<a class="btn" href="javascript:void(0);">登录</a>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!--登录模块尾部 end-->
		
		<div class="loginContent">
			<div class="findBackPwForm">
				<div class="findBackPwFormContent">
					<div class="wid100">
						<div class="tips">请输入您的登录账号，进行密码重设</div>
						<div class="inputGroup">
							<input type="text" class="user" placeholder="手机号/邮箱"/>
							<div class="phoneTips"></div>
						</div>
						<div class="inputGroup">
							<input type="text" class="codeNum" placeholder="验证码"  @keyup="removeDisable"/>
							<button class="sentCode" @click="downCount">获取验证码</button>
							<div class="clear"></div>
						</div>
						<div class="littleTips">短信可能有延迟，若超过1分钟未收到可尝试重新发送</div>
						<button class="nextStep disabled" disabled="disabled">下一步</button>
					</div>
				</div>
			</div>
		</div>
	
		<!--尾部 start-->
		<div class="footer">Copyright © 2008 - 2017 深圳市建筑科学研究院 All Rights Reserved</div>
		<!--尾部 end-->	
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var loginContentMinHeight = $(window).innerHeight() - 80;
			$('.loginContent').css('min-height',loginContentMinHeight + 'px');
			//获取body高度
			var bodyMinHeight = $('.loginContent').height() + 80;
			$('body').css('height',bodyMinHeight + 'px');
		});
		
		var login = new Vue({
			el:'.loginContent',
			methods:{
				downCount:function(){
					var phoneNum = document.querySelector('.user').value;
					if(!phoneNum.match(/^1[3|4|5|8][0-9]\d{4,8}$/)){
						document.querySelector('.user').nextElementSibling.innerHTML = "请输入正确的手机号码";
					}else{
						document.querySelector('.user').nextElementSibling.innerHTML = "";
						var i = 60;
						document.querySelector('.sentCode').innerHTML = i + "s";
						var startDownCount = setInterval(function(){
							if(i > 1){
								i = --i;
								document.querySelector('.sentCode').innerHTML = i + "s";
							}else if(i == 1){
								clearInterval(startDownCount);
								document.querySelector('.sentCode').innerHTML = "再次发送";
							}
						},1000);
					}
				},
				removeDisable:function(){
					var codeNum = document.querySelector('.codeNum');
					var nextStep = document.querySelector('.nextStep');
					if(codeNum.value.length > 4){
						nextStep.classList.remove('disabled');
						nextStep.removeAttribute('disabled');
					}
					
				}
			}
		});
	</script>
</html>
